<script setup>
import { onMounted, ref } from 'vue';
import { Search, Remove, Reading, Document } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import * as XLSX from 'xlsx';
import { jsPDF } from 'jspdf';
import { Document as DocxDocument, Packer, Paragraph, TextRun, HeadingLevel } from 'docx';
import { saveAs } from 'file-saver';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from '@vue-office/pdf';

// 每页多少条数据
const pageSize = ref(10)
// 当前是第几页
const currentPage = ref(1)

// 预警对象选择数据
const warningObjects = ref([
  { value: '', label: '全部' },
  { value: '李明', label: '李明' },
  { value: '徐红', label: '徐红' },
  { value: '谢定哲', label: '谢定哲' },
  { value: '李强宁', label: '李强宁' },
  { value: '郑小鱼', label: '郑小鱼' }
])

// 预警级别选择数据
const warningLevels = ref([
  { value: '', label: '全部' },
  { value: '危机状态', label: '危机状态' }
])

// 团测计划选择数据
const testPlans = ref([
  { value: '', label: '全部' },
  { value: '心理普查测试', label: '心理普查测试' },
  { value: '广泛性焦虑自评量表 (GAD-7)', label: '广泛性焦虑自评量表 (GAD-7)' },
  { value: '中小学生心理健康综合测试 (MHT)', label: '中小学生心理健康综合测试 (MHT)' }
])

// 表头名称选择数据
const tableHeaders = ref([
  { value: '', label: '全部' },
  { value: '症状自评量表（SCL-90）', label: '症状自评量表（SCL-90）' },
  { value: '症状自评量表（SCL-90）', label: '症状自评量表（SCL-90）' },
  { value: '症状自评量表（SCL-90）', label: '症状自评量表（SCL-90）' }
])

// 表格数据
// todo:不应该是id，需要换成别的
const tableData = ref([
  {
    warningObject: '李明',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:07秒'
  },
  {
    warningObject: '陈小天',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:13秒'
  },
  {
    warningObject: '曹晴朗',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '1分55秒'
  },
  {
    warningObject: '徐红',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '06:41秒'
  },
  {
    warningObject: '谢定哲',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:16秒'
  },
  {
    warningObject: '李强宁',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:14秒'
  },
  {
    warningObject: '郑小鱼',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:12秒'
  },
  {
    warningObject: '张明',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:08秒'
  },
  {
    warningObject: '王丽',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:15秒'
  },
  {
    warningObject: '刘强',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '05:22秒'
  },
  {
    warningObject: '赵敏',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:11秒'
  },
  {
    warningObject: '孙华',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '00:09秒'
  },
  {
    warningObject: '周杰',
    warningLevel: '危机状态',
    id: '个体评测',
    testPlan: '心理普查测试',
    tableHeader: '症状自评量表（SCL-90）',
    testTime: '2025-09-17 11:4:03',
    answerDuration: '04:18秒'
  }
])
const tableDataCopy = ref([])

// 当前页表格数据
const currentPageTableData = ref([])

// 搜索信息
const searchInfo = ref({
  warningObject: '',
  dateRange: null
})

// 搜索
const search = () => {
    let filteredData = []
    for (let index = 0; index < tableDataCopy.value.length; index++) {
        let shouldInclude = true

        // 预警对象过滤
        if (searchInfo.value.warningObject && !tableDataCopy.value[index].warningObject.includes(searchInfo.value.warningObject)) {
            shouldInclude = false
        }

        // 时间范围过滤
        if (shouldInclude && searchInfo.value.dateRange && searchInfo.value.dateRange.length === 2) {
            const testTime = new Date(tableDataCopy.value[index].testTime)
            const startDate = new Date(searchInfo.value.dateRange[0])
            const endDate = new Date(searchInfo.value.dateRange[1])
            // 设置结束日期为当天的23:59:59
            endDate.setHours(23, 59, 59, 999)

            if (testTime < startDate || testTime > endDate) {
                shouldInclude = false
            }
        }

        if (shouldInclude) {
            filteredData.push(tableDataCopy.value[index])
        }
    }

    tableData.value = filteredData
    currentPageTableData.value = filteredData.slice(0, pageSize.value)
    currentPage.value = 1
}

// 重置搜索信息
const reset = () => {
    searchInfo.value = { warningObject: '', dateRange: null }
    tableData.value = tableDataCopy.value
    currentPageTableData.value = tableData.value.slice(0, pageSize.value)
    currentPage.value = 1
}

onMounted(() => {
    tableDataCopy.value = [...tableData.value]
    currentPageTableData.value = tableData.value.slice(0, pageSize.value)
})

// 切换当前页面
const handleCurrentChange = (newPage) => {
    let start = (newPage - 1) * pageSize.value
    let end = start + pageSize.value
    currentPageTableData.value = tableData.value.slice(start, end)
}

// 每页条数切换时
const handleSizeChange = (newPageSize) => {
    pageSize.value = newPageSize
    currentPageTableData.value = tableData.value.slice(0, newPageSize)
    currentPage.value = 1
}

// 答题记录弹窗控制
const answerRecordDialogVisible = ref(false)
const currentAnswerRecord = ref(null)

const docDialogVisible = ref(false);
const docSrc = ref(null);
const currentDocTitle = ref('');
const currentDocType = ref(''); // 添加文档类型跟踪

// 模拟答题记录数据
const answerRecordData = ref([
  {
    id: 1,
    question: '过去的一段压力性事件的经历使得的反复发生令人不安的记忆、想法或形象？',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'A.一点也不',
    score: 1
  },
  {
    id: 2,
    question: '过去的一段压力性事件的经历使得的反复发生令人不安的梦境？',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'B.有一点',
    score: 2
  },
  {
    id: 3,
    question: '过去的一段压力性事件的经历仿佛突然间又发生了，又感觉到了(好像您再次体验)?',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'C.中度的',
    score: 3
  },
  {
    id: 4,
    question: '当有事情让您想起过去的一段压力性事件的经历时，您会非常局促不安？',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'B.有一点',
    score: 2
  },
  {
    id: 5,
    question: '当有事情让您想起过去的一段压力性事件的经历时，有身体反应(比如心悸、呼吸困难、出汗)?',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'C.中度的',
    score: 3
  },
  {
    id: 6,
    question: '避免想起或谈论过去的那段压力性事件经历或避免产生与之相关的感觉？',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'D.相当程度的',
    score: 4
  },
  {
    id: 7,
    question: '避免那些能使您想起那段压力性事件经历的活动和局面？',
    options: 'A.一点也不 B.有一点 C.中度的 D.相当程度的 E.极度的',
    answer: 'D.相当程度的',
    score: 4
  }
])

// 打开答题记录弹窗
const openAnswerRecord = (row) => {
  currentAnswerRecord.value = row
  answerRecordDialogVisible.value = true
}

// 打开测评报告弹窗
const openEvaluationReport = (row) => {
  viewDocument('测评报告');
}

// 打开预警报告弹窗
const openWarningReport = (row) => {
  viewDocument('预警报告');
}

const rendered = () => {
  console.log("渲染完成")
}

// 查看文档方法
const viewDocument = async (docType) => {
  currentDocTitle.value = docType;
  currentDocType.value = docType; // 设置当前文档类型
  // 根据文档类型设置URL
  const baseUrl = '/docs/';
  let docPath = '';

  switch (docType) {
    case '测评报告':
      docPath = baseUrl + '测评报告.pdf';
      break;
    case '预警报告':
      docPath = baseUrl + '预警报告（1）.docx';
      break;
    default:
      ElMessage.error('文档不存在');
      return;
  }

  try {
    // 加载文档文件
    const response = await fetch(docPath);
    if (!response.ok) {
      throw new Error(`无法加载文档: ${response.statusText}`);
    }

    if (docType === '测评报告') {
      // PDF 文件直接使用 URL
      docSrc.value = docPath;
    } else {
      // DOCX 文件使用 arrayBuffer
      docSrc.value = await response.arrayBuffer();
    }

    // 显示文档预览对话框
    docDialogVisible.value = true;

    ElMessage({
      message: '文档加载成功',
      type: 'success'
    });
  } catch (error) {
    console.error('文档加载失败:', error);
    ElMessage.error(`文档加载失败: ${error.message}`);
  }
}

// 导出Word功能
const exportToWord = async () => {
  try {
    // 根据当前文档类型确定要下载的文件
    const baseUrl = '/docs/';
    let fileName = '';
    let filePath = '';

    switch (currentDocType.value) {
      case '测评报告':
        fileName = '测评报告.docx';
        filePath = baseUrl + '测评报告.docx';
        break;
      case '预警报告':
        fileName = '预警报告（1）.docx';
        filePath = baseUrl + '预警报告（1）.docx';
        break;
      default:
        ElMessage.error('无法确定要导出的文档类型');
        return;
    }

    // 获取文件
    const response = await fetch(filePath);
    if (!response.ok) {
      throw new Error(`无法获取文件: ${response.statusText}`);
    }

    // 创建下载链接
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // 触发下载
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    ElMessage({
      message: `${fileName} 导出成功`,
      type: 'success'
    });
  } catch (error) {
    console.error('导出Word失败:', error);
    ElMessage.error(`导出Word失败: ${error.message}`);
  }
}

// 导出Excel功能
const exportToExcel = () => {
    try {
        // 创建工作簿
        const wb = XLSX.utils.book_new();

        // 准备数据
        const data = [
            ['题目', '选项', '答案', '得分'],
            ...answerRecordData.value.map(item => [
                item.question,
                item.options,
                item.answer,
                item.score
            ])
        ];

        // 创建工作表
        const ws = XLSX.utils.aoa_to_sheet(data);

        // 设置列宽
        ws['!cols'] = [
            { wch: 50 }, // 题目列宽
            { wch: 30 }, // 选项列宽
            { wch: 15 }, // 答案列宽
            { wch: 10 }  // 得分列宽
        ];

        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, ws, '答题记录');

        // 导出文件
        XLSX.writeFile(wb, `${currentAnswerRecord.value?.studentName || '学生'}_答题记录.xlsx`);

        ElMessage.success('Excel导出成功！');
    } catch (error) {
        console.error('Excel导出失败:', error);
        ElMessage.error('Excel导出失败，请重试！');
    }
};

// 导出PDF功能
const exportToPDF = () => {
    try {
        // 确保中文字体支持已加载
        const loadFontAndExport = () => {
            const doc = new jsPDF();

            // 添加中文字体支持
            if (window.addChineseFont) {
                window.addChineseFont(jsPDF);
            }

            // 等待字体注册完成后设置字体
            setTimeout(() => {
                try {
                    // 设置中文字体
                    doc.setFont('SourceHanSans', 'normal');
                } catch (fontError) {
                    console.warn('中文字体设置失败，使用默认字体:', fontError);
                    // 如果中文字体设置失败，使用默认字体
                    doc.setFont('helvetica', 'normal');
                }

                doc.setFontSize(16);

                // 标题
                doc.text('答题记录', 20, 20);

                // 学生信息
                doc.setFontSize(12);
                doc.text(`学生姓名: ${currentAnswerRecord.value?.warningObject || ''}`, 20, 35);
                doc.text(`测评时间: ${currentAnswerRecord.value?.testTime || ''}`, 20, 45);

                // 表格数据
                let yPosition = 60;
                doc.setFontSize(10);

                answerRecordData.value.forEach((item, index) => {
                    if (yPosition > 270) { // 换页
                        doc.addPage();
                        yPosition = 20;
                        // 在新页面也设置字体
                        try {
                            doc.setFont('SourceHanSans', 'normal');
                        } catch (fontError) {
                            doc.setFont('helvetica', 'normal');
                        }
                    }

                    doc.text(`${index + 1}. ${item.question}`, 20, yPosition);
                    yPosition += 10;
                    doc.text(`选项: ${item.options}`, 25, yPosition);
                    yPosition += 10;
                    doc.text(`答案: ${item.answer}`, 25, yPosition);
                    yPosition += 10;
                    doc.text(`得分: ${item.score}`, 25, yPosition);
                    yPosition += 15;
                });

                // 保存PDF
                doc.save(`${currentAnswerRecord.value?.warningObject || '学生'}_答题记录.pdf`);

                ElMessage.success('PDF导出成功！');
            }, 100); // 给字体注册一些时间
        };

        // 检查字体文件是否已加载
        if (window.addChineseFont) {
            loadFontAndExport();
        } else {
            // 动态加载字体文件
            const script = document.createElement('script');
            script.src = '/source-han-sans-normal.js';
            script.onload = () => {
                // 等待字体文件加载完成
                setTimeout(loadFontAndExport, 200);
            };
            script.onerror = () => {
                console.warn('中文字体文件加载失败，使用默认字体');
                loadFontAndExport();
            };
            document.head.appendChild(script);
        }
    } catch (error) {
        console.error('PDF导出失败:', error);
        ElMessage.error('PDF导出失败，请重试！');
    }
}
</script>

<template>
<div class="warning-list-container">
    <!-- 搜索区域 -->
    <div class="top1">
        <el-row justify="end">
            <el-col :span="5">
                <el-input
                    v-model="searchInfo.warningObject"
                    placeholder="请输入预警对象"
                    style="width: 240px"
                    clearable
                />
            </el-col>
            <el-col :span="5">
                <el-date-picker
                    v-model="searchInfo.dateRange"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 240px"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="search">
                    <el-icon><Search /></el-icon>
                    查询
                </el-button>
                <el-button @click="reset">
                    <el-icon><Remove /></el-icon>
                    重置
                </el-button>
            </el-col>
        </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
        <el-table
            :data="currentPageTableData"
            style="width: 100%"
            height="400"
            :header-cell-style="{ 'background-color': '#f5f7fa' }"
        >
            <el-table-column prop="warningObject" label="预警对象" min-width="120" align="left" />
            <el-table-column prop="warningLevel" label="预警级别" min-width="120" align="left">
                <template #default="scope">
                    <span class="warning-level">{{ scope.row.warningLevel }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="预警来源" min-width="120" align="left" />
            <el-table-column prop="tableHeader" label="量表名称" min-width="160" align="left" />
          <el-table-column prop="answerDuration" label="答题时长" min-width="120" align="left" />
            <el-table-column prop="testTime" label="测评时间" min-width="180" align="left" />
            <el-table-column fixed="right" label="操作" width="300" align="center">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="scope.row.warningObject !== '李明'"
                        @click="openAnswerRecord(scope.row)"
                    >
                        <el-icon><Reading /></el-icon>
                        答题记录
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="scope.row.warningObject !== '李明'"
                        @click="openEvaluationReport(scope.row)"
                    >
                        <el-icon><Document /></el-icon>
                        测评报告
                    </el-button>
                    <el-button
                        type="warning"
                        size="small"
                        :disabled="scope.row.warningObject !== '李明'"
                        @click="openWarningReport(scope.row)"
                    >
                        <el-icon><Document /></el-icon>
                        预警报告
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="page-box">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>

    <!-- 答题记录弹窗 -->
    <el-dialog
        v-model="answerRecordDialogVisible"
        title="答题记录"
        width="80%"
        :close-on-click-modal="false"
        top="5vh"
    >
        <div v-if="currentAnswerRecord" class="answer-record-content">
            <!-- 提示信息 -->
            <div class="record-header">
                <span class="record-tip">
                    提示：仅显示 <span class="highlight">{{ currentAnswerRecord.warningObject }}</span>
                    对 <span class="highlight">{{ currentAnswerRecord.tableHeader }}</span>
                    的最后一次答题记录。
                </span>
                <div class="export-buttons">
                    <el-button type="primary" @click="exportToExcel">
                        导出Excel
                    </el-button>
                </div>
            </div>

            <!-- 答题记录表格 -->
            <el-table
                :data="answerRecordData"
                style="width: 100%; margin-top: 20px;"
                :header-cell-style="{ 'background-color': '#f5f7fa' }"
                border
            >
                <el-table-column prop="id" label="题目" width="80" align="center" />
                <el-table-column prop="question" label="题目内容" min-width="400" align="left" />
                <el-table-column prop="options" label="选项" min-width="300" align="left" />
                <el-table-column prop="answer" label="答案" width="120" align="center">
                    <template #default="scope">
                        <span class="answer-text">{{ scope.row.answer }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="得分" width="80" align="center">
                    <template #default="scope">
                        <span class="score-text">{{ scope.row.score }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="answerRecordDialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>



    <!-- 文档预览对话框 -->
    <el-dialog v-model="docDialogVisible" :title="currentDocTitle" width="80%" destroy-on-close>
      <template #header="{ close, titleId, titleClass }">
        <div class="dialog-header">
          <span :id="titleId" :class="titleClass">{{ currentDocTitle }}</span>
          <el-button
            type="primary"
            size="small"
            class="export-word-btn"
            @click="exportToWord"
          >
            导出Word
          </el-button>
        </div>
      </template>
      <div style="height: 600px; overflow-y: auto;">
        <VueOfficePdf v-if="currentDocType === '测评报告'" :src="docSrc" @rendered="rendered" />
        <VueOfficeDocx v-else :src="docSrc" @rendered="rendered" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="docDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<style scoped>
div {
    overflow: hidden;
}
.top1 {
    padding: 10px 0px 0px 10px;
    min-height: 50px;
}
.table-box {
    padding-left: 10px;
}
.page-box {
    display: flex;
    justify-content: center;
    padding-left: 10px;
    margin-top: 10px;
}

.warning-level {
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.warning-level::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
}

/* 答题记录弹窗样式 */
.answer-record-content {
    padding: 0;
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
}

.record-tip {
    color: #666;
    font-size: 14px;
}

.highlight {
    color: #409eff;
    font-weight: bold;
}

.export-buttons {
    display: flex;
    gap: 10px;
}

.answer-text {
    color: #333;
    font-weight: 500;
}

.score-text {
    color: #409eff;
    font-weight: bold;
}

/* 测评报告和预警报告弹窗样式 */
.evaluation-report-content,
.warning-report-content {
    padding: 0;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 2px solid #ebeef5;
    margin-bottom: 20px;
}

.report-header h3 {
    margin: 0;
    color: #333;
    font-size: 24px;
    font-weight: bold;
}

.student-info {
    flex: 1;
    margin: 0 20px;
}

.student-info p {
    margin: 8px 0;
    color: #666;
    font-size: 14px;
}

.student-info strong {
    color: #333;
    margin-right: 8px;
}

.warning-level {
  color: #333333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.report-content {
    margin-top: 20px;
}

.report-section {
    margin-bottom: 20px;
}

.report-section:last-child {
    margin-bottom: 0;
}

.card-header {
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.analysis-content,
.suggestions-content,
.warning-content,
.intervention-content,
.notice-content {
    padding: 10px 0;
    line-height: 1.6;
}

.analysis-content p,
.warning-content p {
    margin-bottom: 10px;
    color: #666;
}

.analysis-content ul,
.warning-content ul,
.notice-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.analysis-content li,
.warning-content li,
.notice-content li {
    margin: 8px 0;
    color: #666;
}

.suggestions-content ol,
.intervention-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.suggestions-content li,
.intervention-content li {
    margin: 8px 0;
    color: #666;
}

.warning-card {
    border-left: 4px solid #ff4757;
}

.notice-card {
    border-left: 4px solid #ffa502;
    background-color: #fff9f0;
}

/* 文档预览弹窗样式 */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.export-word-btn {
    margin-left: auto;
}
</style>
